<template>
    <div class="committee" >
        <div class="offfour">
            <div class="offfour_left">
                <img :src="offfour_left">
            </div>
            <div class="offfour_right">
                <p>{{name}}</p>
                <p>{{unit}}</p>
                <p>{{title}}</p>
            </div>
        </div>
        <div class="cen">
            <img src="../../common/image/officer/committee.png"><span>组委会简介</span>
        </div>
        <div class="foot" v-html=" brief">

        </div>
    </div>
</template>

<script>
    import {Toast,Indicator} from 'mint-ui';
    export default {
        name: "committee",
        data(){
            return{
                offfour_left:'',
                cemdata:null,
                name:'',
                unit:'',
                title:'',
                brief:''
            }
        },
        beforeCreate(){
            // console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
            // console.log(this.msg)//undefined
            // console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created(){


            // console.log(
            //   // this.$route.params.reg_numb,
            //   // this.$route.params.base_num,
            //   // this.$route.params.super_num,
            //   // this.$route.params.join_num,
            //   this.$route.params.meeting
            // )
            // console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            // this.msg+='!!!'
            // console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount(){
            // console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            // this.msg+='@@@@'
            // console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log(document.getElementsByClassName("myp")[0])//undefined
            // console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted(){
            // this.$router()
            // this.id = this.$route.query.id
            this.$fetch('/mobile/meeting/getCommittee',
                {id:this.$route.query.id}
            )
                .then((response) => {
                    this.offfour_left =response.data.avatar
                    this.name =response.data.name
                    this.unit=response.data.unit
                    this.title=response.data.title
                    this.brief=response.data.brief

                }).catch(err => {
                Toast({
                    message: '获取数据失败',
                    duration: 3000
                });
            })
            // console.log(this.$route.query.id)
            // console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
            // console.log(document.getElementsByClassName("myp")[0])
            // console.log('可以在这里操作真实dom等事情...')
            //  let officer_li = document.getElementsByClassName('officer-li');
            // officer_li.onclick(function() {
            //   for (let i = 0; i<officer_li.length; i++) {
            //    console.log(11)
            //   }
            // })

            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'
            //    }.bind(this),500)
        },
        methods: {
            newsp:function(){

            }
        },
        watch:{

        },
        beforeUpdate:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('beforeUpdate:重新渲染之前触发')
            // console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
        },
        updated:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            // console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            // console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    }
</script>

<style lang="scss" scoped>
    /*会议组委会*/
    .committee{
        font-size: 26px;
        line-height: normal;
        word-break: break-all;
    }
    /*头部*/
    .offfour{
        overflow: hidden;
        clear: none;
        padding: 20px 0;
        border-bottom: 1px solid #D7D7D7;/*no*/
        padding-left: 12px;
        padding-right: 12px;
        .offfour_left{
            float: left;
            width: 120px;
            height: 120px;
            overflow: hidden;
            border-radius: 50%;
            img{
                width: 120px;
                height: 120px;
                border-radius: 50%;
            }
        }
        .offfour_right{
            width: 560px;
            padding-left: 20px;
            padding-top: 14px;
            float: left;

        }
    }
    /*中部*/
    .cen{
        padding: 20px 12px;
        border-bottom: 1px solid #D7D7D7;/*no*/
        clear: none;
        overflow: hidden;
        img{
            float: left;
            width: 50px;
            height: 50px;
        }
        span{
            float: left;
            font-size: 30px;
            font-weight: 700;
            margin-top: 6px;
            margin-left: 10px;
        }
    }
    /*底部*/
    .foot{
        border-bottom: 1px solid #D7D7D7;/*no*/
        padding: 12px;
    }
</style>
